<template>
    <div class="ueditor-wrap">
        <vue-ueditor-wrap v-model="content" editor-id="editor" :config="editorConfig"
            :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" @ready="onEditorReady" />
        <!-- <vue-ueditor-wrap ref="ueditorRef" v-model="content" editor-id="editor" :config="editorConfig"
            :editorDependencies="['ueditor.config.js', 'ueditor.all.js']" @ready="onEditorReady" /> -->
    </div>
</template>

<script setup>
import { ref, watch, defineEmits } from 'vue';
import { upload } from '@/api/common'

const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    }
});
const baseUrl = import.meta.env.VITE_AXIOS_BASE_URL

const emit = defineEmits(['update:modelValue']);
const content = ref(props.modelValue);
// 监听 props 的变化，确保父组件更新时子组件也同步更新
watch(() => props.modelValue, (newVal) => {
    content.value = newVal;
});
// 监听编辑器内容变化，触发更新事件
watch(() => content.value, (newVal) => {
    emit('update:modelValue', newVal);
});
//上传图片节点
let fileInput = null;
function getFileInput() {
    if (!fileInput) {
        fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.multiple = true; // 关键：设置 multiple 属性
        fileInput.accept = 'image/*';
        fileInput.style.display = 'none';
        document.body.appendChild(fileInput);
    }
    return fileInput;
}

const editorConfig = {
    // 后端服务地址，后端处理参考
    // https://open-doc.modstart.com/ueditor-plus/backend.html
    // serverUrl: '/admin/ajax/upload',
    serverUrl: null,
    loadConfigFromServer: false,// 从服务器获取配置
    UEDITOR_HOME_URL: '/static/UEditorPlus/',
    UEDITOR_CORS_URL: '/static/UEditorPlus/',
    initialFrameWidth: '100%',
    autoHeightEnabled: false,
    toolbars: [
        [
            "fullscreen",   // 全屏
            "source",       // 源代码
            "|",
            "undo",         // 撤销
            "redo",         // 重做
            "|",
            "bold",         // 加粗
            "italic",       // 斜体
            "underline",    // 下划线
            "fontborder",   // 字符边框
            "strikethrough",// 删除线
            "superscript",  // 上标
            "subscript",    // 下标
            "removeformat", // 清除格式
            "formatmatch",  // 格式刷
            "autotypeset",  // 自动排版
            "blockquote",   // 引用
            "pasteplain",   // 纯文本粘贴模式
            "|",
            "forecolor",    // 字体颜色
            "backcolor",    // 背景色
            "insertorderedlist",   // 有序列表
            "insertunorderedlist", // 无序列表
            "selectall",    // 全选
            "cleardoc",     // 清空文档
            "|",
            "rowspacingtop",// 段前距
            "rowspacingbottom",    // 段后距
            "lineheight",          // 行间距
            "|",
            "customstyle",         // 自定义标题
            "paragraph",           // 段落格式
            "fontfamily",          // 字体
            "fontsize",            // 字号
            "|",
            "directionalityltr",   // 从左向右输入
            "directionalityrtl",   // 从右向左输入
            "indent",              // 首行缩进
            "|",
            "justifyleft",         // 居左对齐
            "justifycenter",       // 居中对齐
            "justifyright",
            "justifyjustify",      // 两端对齐
            "|",
            "touppercase",         // 字母大写
            "tolowercase",         // 字母小写
            "|",
            "link",                // 超链接
            "unlink",              // 取消链接
            "anchor",              // 锚点
            "|",
            "imagenone",           // 图片默认
            "imageleft",           // 图片左浮动
            "imageright",          // 图片右浮动
            "imagecenter",         // 图片居中
            "|",
            // "simpleupload",        // 单图上传
            "insertimage",         // 多图上传
            "emotion",             // 表情
            // "scrawl",              // 涂鸦
            // "insertvideo",         // 视频
            // "attachment",          // 附件
            // "insertframe",         // 插入Iframe
            // "insertcode",          // 插入代码
            "pagebreak",           // 分页
            "template",            // 模板
            "background",          // 背景
            "formula",             // 公式
            "|",
            "horizontal",          // 分隔线
            "date",                // 日期
            "time",                // 时间
            "spechars",            // 特殊字符
            "wordimage",           // Word图片转存
            "|",
            "inserttable",         // 插入表格
            "deletetable",         // 删除表格
            "insertparagraphbeforetable",     // 表格前插入行
            "insertrow",           // 前插入行
            "deleterow",           // 删除行
            "insertcol",           // 前插入列
            "deletecol",           // 删除列
            "mergecells",          // 合并多个单元格
            "mergeright",          // 右合并单元格
            "mergedown",           // 下合并单元格
            "splittocells",        // 完全拆分单元格
            "splittorows",         // 拆分成行
            "splittocols",         // 拆分成列
            "contentimport",       // 内容导入（支持Word、Markdown）
            // "|",
            // "ai",                  // AI智能
            "|",
            // "insertcustombutton",
            "print",               // 打印
            "preview",             // 预览
            "searchreplace",       // 查询替换
            // "help",                // 帮助
        ]
    ],
    //自定义拦截 按钮点击事件
    toolbarCallback: function (cmd, editor) {
        // 拦截图片上传按钮点击 改为单图上传
        if (cmd === 'insertimage') {
            const input = getFileInput();
            input.value = '';
            input.onchange = async () => {
                const files = input.files;
                for (let i = 0; i < files.length; i++) {
                    let file = files[i]
                    if (file) {
                        let fd = new FormData()
                        fd.append('file', file)
                        let res = await upload(fd, {}, true);
                        if (res.code == 1) {
                            let url = res.data.url;
                            if (url) {
                                editor.execCommand('insertHtml', `<img src="${url}" />`);
                            }
                        }
                    }
                }
            };
            input.click();
            return true;
        }
    },
}

const editorInstance = ref(null); // 用于保存编辑器实例
// 编辑器初始化完成回调
const onEditorReady = (editor) => {
    // console.log('UEditorPlus 初始化完成');
    editorInstance.value = editor; // 保存实例
    // 可以在这里调用 UEditorPlus 的 API 方法
    editor.focus(); // 例如让编辑器获得焦点
    // editor.setContent('这是初始化后的内容'); // 设置内容
    editor.setHeight(600); // 设置内容
    // 也可以绑定其他事件
    editor.addListener('contentChange', () => {
        // console.log('内容发生变化:', editor.getContent());
    });
};
</script>
<style scoped>
.ueditor-wrap {
    height: 700px;
    width: 100%;
}
</style>